import React from 'react'
import Counter from '../../UI/Counter/Counter'

// 引入样式
import classes from './Meal.module.css'

export default function Meal(props) {
	const { isPay, haveDesc, img, title, desc, price, id } = props
	const pickedNum = props.pickedNum ? props.pickedNum : 0
	
	return (
		<div
			className={classes.MealContainer}
			style={isPay ? { height: '160rem', padding: '0' } : {}}
		>
			<div
				className={classes.MealWrap}
				style={isPay ? { height: '160rem' } : {}}
			>
				<img
					src={img}
					alt={title}
					style={isPay ? { height: '150rem', marginRight: '40rem' } : {}}
				/>
				<div className={classes.MealDetail}>
					<div className={classes.MealTitle}>{title}</div>
					{haveDesc ? <div className={classes.MealDesc}>{desc}</div> : ''}
					<div className={classes.MealDetailBottom}>
						<div
							className={classes.MealPrice}
							style={isPay ? { order: 2 } : {}}
						>
							<span>￥</span>
							{price}
						</div>
						{/* 计数器 */}
						<Counter
							mealData={{ id, title, price, img }}
							pickedNum={pickedNum}
						/>
					</div>
				</div>
			</div>
		</div>
	)
}
